<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Zone.js addEventListenerBenchmark</title>
    <link rel="stylesheet" href="../css/style.css" />
    <script src="../../dist/zone.js"></script>
  </head>
  <body>
    <h1>addEventListener Benchmark</h1>

    <h2>No Zone</h2>
    <button id="b1">Add/Remove same callback</button>
    <button id="b2">Add/Remove different callback</button>

    <h2>With Zone</h2>
    <button id="b3">Add/Remove same callback</button>
    <button id="b4">Add/Remove different callback</button>

    <div id="rootDiv"></div>

    <script>
      b1.addEventListener('click', function () { addRemoveCallback(true, false); });
      b2.addEventListener('click', function () { addRemoveCallback(false, false); });
      b3.addEventListener('click', function () { addRemoveCallback(true, true); });
      b4.addEventListener('click', function () { addRemoveCallback(false, true); });
      var divs = [];
      var callbacks = [];
      var size = 100000;
      for(var i = 0; i < size; i++) {
          var div = document.createElement("div");
          var callback = (function(i) { return function() { console.log(i); }; })(i);
          rootDiv.appendChild(div);
          divs[i] = div;
          callbacks[i] = callback;
      }

      function addRemoveCallback(reuse, useZone) {
        var start = performance.now();
        var callback = callbacks[0];
        for(var i = 0; i < size; i++) {
          var div = divs[i];
          if (!reuse) callback = callbacks[i];
          if (useZone)
            div.addEventListener('click', callback);
          else
            div.__zone_symbol__addEventListener('click', callback);
        }

        for(var i = 0; i < size; i++) {
          var div = divs[i];
          if (!reuse) callback = callbacks[i];
          if (useZone)
            div.removeEventListener('click', callback);
          else
            div.__zone_symbol__removeEventListener('click', callback);
        }
        var end = performance.now();
        console.log(useZone ? 'use zone': 'native', reuse ? 'reuse' : 'new', end - start, 'ms');
      }
    </script>
  </body>
</html>
